<template>
  <div>
    <el-select
      v-model="formValue"
      size="mini"
      clearable
      :placeholder="form.placeholder"
      @change="handleChange"
    >
      <el-option
        v-for="(option, index) in options"
        :key="index"
        :label="option[form.optionLabel]"
        :value="option[form.optionValue]"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      options: [],
      formValue: ''
    }
  },
  watch: {
    value(newValue) {
      this.formValue = newValue
    }
  },
  mounted() {
    const params = this.form.params || {}
    this.form.asyncFunc(params).then(res => {
      if (res.code === 10000) {
        this.options = res.data.data
      } else {
        this.$message.error(res.message)
      }
    })
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value)
    }
  }
}
</script>